<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="编号"
                  prop="supplierId"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="供应商名称"
                  prop="supplierName"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="负责人"
                  prop="supplierPeo"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="经营范围"
                  prop="supplierScope"
                  width="360">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="display: flex;justify-content: center">
      <el-row style="margin: 25px;width: 200px">
        <el-input v-model="searchName" placeholder="供应商名称" style="margin-bottom: 10px"></el-input>
        <el-input v-model="searchScope" placeholder="经营范围"></el-input>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-button plain type="primary" @click="findByItem">查询</el-button>
        <el-button plain type="primary" @click="showSupplierById">查看供应商详情</el-button>
        <el-button plain type="primary" @click="updateSupplierInfo">更新供应商信息</el-button>
        <el-button plain type="primary" @click="addSupplier">添加新的供应商</el-button>
      </el-row>
    </div>


    <el-dialog
        :visible.sync="showInfoById"
        title="供应商信息详情"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="供应商名称">
          {{ currentRow.supplierName }}
        </el-form-item>
        <el-form-item label="负责人">
          {{ currentRow.supplierPeo }}
        </el-form-item>
        <el-form-item label="负责人电话">
          {{ currentRow.supplierTel }}
        </el-form-item>
        <el-form-item label="供应商地址">
          {{ currentRow.supplierAddress }}
        </el-form-item>
        <el-form-item label="经营范围">
          {{ currentRow.supplierScope }}
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog
        :visible.sync="updateInfoById"
        title="更新供应商信息"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="供应商名称">
          {{ currentRow.supplierName }}
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="updateSupplierPeo" placeholder="请输入内容">{{ updateSupplierPeo }}</el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="updateSupplierTel" placeholder="请输入内容">{{ updateSupplierTel }}</el-input>
        </el-form-item>
        <el-form-item label="供应商地址">
          {{ currentRow.supplierAddress }}
        </el-form-item>
        <el-form-item label="经营范围">
          {{ currentRow.supplierScope }}
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="update">点击更新</el-button>
    </el-dialog>


    <el-dialog
        :visible.sync="addNewInfo"
        title="添加新的供应商"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="供应商名称">
          <el-input v-model="newSupplierName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="newSupplierPeo" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="newSupplierTel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址">
          <el-input v-model="newSupplierAddress" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
          <el-input v-model="newSupplierScope" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <el-button plain type="primary" @click="addNew">点击添加</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Supplier",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      currentRow: 0,//当前选中列
      showInfoById: false,
      searchName: '',
      searchScope: '',
      updateInfoById: false,
      updateSupplierPeo: '',
      updateSupplierTel: '',
      addNewInfo: false,
      newSupplierPeo: '',
      newSupplierName: '',
      newSupplierTel: '',
      newSupplierAddress: '',
      newSupplierScope: ''

    }
  },
  mounted() {
    this.showPage()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    },
    findByItem() {
      this.showPage()
    },
    showPage() {
      if (this.searchName == '') {
        this.searchName = 1
      }
      if (this.searchScope == '') {
        this.searchScope = 1
      }
      let url = "api/supplier/showSupplierByPage/" + this.currentPage + "/" + this.searchName + "/" + this.searchScope;
      this.axios.get(url).then(
          r => {
            this.tableData = r.data.records
            this.totalSize = r.data.total
            this.pageSize = r.data.size
          }
      )
      this.searchName = ''
      this.searchScope = ''
    },
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    showSupplierById() {
      if (this.currentRow === 0) {
        this.messageShow("请先选中行")
        return
      }
      this.showInfoById = true
      console.log("current:" + this.currentRow)

    },
    updateSupplierInfo() {
      if (this.currentRow === 0) {
        this.messageShow("请先选中行")
        return
      }
      this.updateInfoById = true
    },
    update() {
      //未输入的时候如何进行处理
      if (this.updateSupplierPeo === '' || this.updateSupplierTel === '') {
        this.messageShow("更新失败", "还有必填项没有填写")
        return;
      }
      let url = "api/supplier/updateSupplier/" + this.currentRow.supplierId + "/" + this.updateSupplierPeo + "/" + this.updateSupplierTel;
      this.axios.post(url).then(
          r => {
            this.messageShow('', r.data.info)
            //关闭窗口
            this.updateInfoById = false
            this.showPage()
          })
    },
    addSupplier() {
      this.addNewInfo = true
    },
    addNew() {
      if (this.newSupplierName === '' || this.newSupplierPeo === '' || this.newSupplierTel === '' || this.newSupplierAddress === '' || this.newSupplierScope === '') {
        this.messageShow("添加失败", "还有必填项没有进行填写")
        return
      }
      let url = "api/supplier/addSupplier" + "/" + this.newSupplierName + "/" + this.newSupplierPeo + "/" + this.newSupplierTel + "/" + this.newSupplierAddress + "/" + this.newSupplierScope
      this.axios.post(url).then(
          r => {
            this.messageShow("添加成功")
            this.addNewInfo = false
            this.showPage()
          })
    },
    messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    }
  }
}
</script>

<style scoped>

</style>